<template>
  <div class="header">
    <div class="left">
      <div class="logo">
        <img src="../assets/img/header/logo.png" alt="" />
      </div>
      <div class="right-text">
        <h2 class="text">大佛寺智能化综合管控平台</h2>
        <div class="en-text">
          intelligent Integrated Management and Control Platform
        </div>
      </div>
    </div>

    <div class="nav-bar">
      <div
        :class="['nav-item', nav.name === currentFistNav ? 'current' : '']"
        v-for="nav in menuList"
        :key="nav.name"
        @click="handleNavClick(nav)"
      >
        {{ nav.meta.title }}
        <div class="children" v-if="nav.name === currentFistNav">
          <div
            :class="['child', child.name === currentNav ? 'current' : '']"
            v-for="child in nav.children"
            :key="nav.name + child.name"
            @click="handleNavChildClick(child)"
          >
            {{ child.meta.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div :class="['warn', alarmCount > 0 ? 'warning' : 'default']">
        <img
          v-if="alarmCount > 0"
          class="warnbell"
          src="../assets/img/header/alarm1.svg"
          alt=""
        />
        <img
          v-else
          class="warnbell"
          src="../assets/img/header/alarm2.svg"
          alt=""
        />
        <div class="info">
          监测告警 {{ alarmCount > 99 ? "99+" : alarmCount }}
        </div>
      </div>
      <div class="product">
        <div class="line" />
        <div class="item">
          <img src="../assets/img/header/header_people.png" alt="" />
          <div class="item-inner">
            <span class="label">井下人员</span>
            <span class="value" :style="{color: inwellNum >= 850 ? '#EF303B' : '#57FFAA'}">{{inwellNum}}</span>
          </div>
        </div>
        <div class="line" />
      </div>
      <div class="setting">
        <div
          style="display: flex; align-items: center; cursor: pointer"
          @click="settingClick"
        >
          <img
            src="../assets/img/header/person.png"
            alt=""
            class="person-icon"
          />
          <img
            src="../assets/img/header/arrow-down.png"
            alt=""
            class="arrow-down"
          />
        </div>
        <div class="setting-panel" v-show="settingPanelShow">
          <div @click="collapse">{{ boxStatus ? '收起面板' : '弹出面板' }}</div>
          <div @click="logout">退出</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { routes } from '../router/routes';

import { queryLogout } from '@/api/item/common';
export default {
  name: 'HeaderBar',
  data() {
    return {
      alarmCount: 1000,
      settingPanelShow: false,
      currentNav: 'dispatch',
      path: [],
      times: null,
      actionLoopTimer3S: null
    };
  },
  watch: {
    $route: {
      handler: function(val) {
        this.path = val.fullPath.split('/');
        if (this.path.length > 2) {
          if (this.path[2] === 'time') {
            this.currentNav = this.path[1];
          } else {
            this.currentNav = this.path[2];
          }
        } else {
          this.currentNav = this.path[1];
        }
      },
      immediate: true
    }
  },
  computed: {
    menuList() {
      return routes[3].children.filter((item) => item.meta);
    },
    currentFistNav() {
      const { currentNav, menuList } = this;
      let currentFistNav = null;
      menuList.forEach((nav) => {
        if (currentNav === nav.name) {
          currentFistNav = nav.name;
        } else if (
          nav.children &&
          nav.children.find((child) => child.name === currentNav)
        ) {
          currentFistNav = nav.name;
        }
      });
      return currentFistNav;
    },
    inwellNum() {
      return this.$store.state.inwellNum;
    },
    boxStatus() {
      return this.$store.state.boxStatus;
    }
  },
  mounted() {
    this.onload();
    this.startActionLoop3S(() => {
      this.$store.dispatch('getInWellPersonInfo');
    });
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
  },
  methods: {
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    // 页面刷新时跳转到首页
    onload() {
      window.addEventListener('load', () => {
        this.$router.push('/default');
      });
    },
    // 路由切换
    handleNavClick(nav) {
      const { name, meta, children } = nav;
      this.currentNav = name;

      if (children && children.length > 0) {
        return false;
      } else {
        this.$router.push({ name });

        // 发送消息
        const { sceneName } = meta;
        if (sceneName) {
          this.sendCocosEvent(sceneName);
        }
      }
    },
    // 二级路由跳转
    handleNavChildClick(nav) {
      const { name, meta, children } = nav;
      // console.log(nav);
      this.currentNav = name;
      this.$router.push({ name });

      // 发送消息
      const { sceneName } = meta;
      if (sceneName) {
        this.sendCocosEvent(sceneName);
      }
    },
    settingClick() {
      this.settingPanelShow = !this.settingPanelShow;
    },
    // 收起面板
    collapse() {
      this.settingPanelShow = false;

      const str = this.boxStatus ? '收起面板' : '弹出面板';

      if (str === '收起面板') {
        this.$store.commit('setData', { name: 'boxStatus', value: false });
      }
      if (str === '弹出面板') {
        this.$store.commit('setData', { name: 'boxStatus', value: true });
      }
    },
    // 退出
    async logout() {
      this.settingPanelShow = false;

      const res = await queryLogout();
      if (res.data.code === 200) {
        localStorage.clear();
        this.$router.push('/login');
      }
    },
    // iframe通信
    sendCocosEvent(sceneName) {
      if (!sceneName) {
        return;
      }

      this.$store.dispatch('sceneLoaded');
      this.$store.dispatch('postToEngine', { sceneName });
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 4.9375rem;
  background-image: url("../assets/img/header/header-decorate.png");
  background-size: 100% 63%;
  padding: 0 1.5rem 0 0.9375rem;
  position: relative;
  z-index: 11;
  background-repeat: no-repeat;
  .left {
    display: flex;
    align-items: center;
    height: 2.875rem;
    padding-top: 0.25rem;
    .logo {
      height: 100%;
      margin-right: 0.375rem;
      img {
        height: 100%;
      }
    }
    .right-text {
      padding-top: 0.25rem;
      text-align: left;
      .text {
        width: 22.875rem;
        font-size: 1.625rem;
        color: $white;
      }
      .en-text {
        margin-top: 0.1875rem;
        font-size: 1rem;
        line-height: 1rem;
        color: rgba($color: $white, $alpha: 0.6);
        transform: scale(0.5);
        transform-origin: left top;
      }
    }
  }

  .nav-bar {
    display: flex;
    padding-top: 1.9375rem;
    .nav-item {
      width: 8.5625rem;
      height: 1.8125rem;
      line-height: 1.8125rem;
      font-size: 1.125rem;
      font-weight: 700;
      color: rgba($color: $white, $alpha: 0.8);
      cursor: pointer;
      background-size: 100% 100%;
      text-align: center;
      &:nth-of-type(n + 2) {
        margin-left: 2.8125rem;
      }
      &.current {
        color: #00fdff;
        background-image: url("~@/assets/img/header/tab-shadow.png");
        background-size: 100% 100%;
      }

      .children {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        z-index: 2;
        .child {
          font-size: 1rem;
          line-height: 2.4375rem;
          color: #adadad;
          margin-top: 0.25rem;
          cursor: pointer;
          &:nth-of-type(n + 2) {
            margin-left: 2.5rem;
          }
          &.current {
            color: #00fdff;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
    padding-top: 0.7813rem;
    .line {
      width: 0.0625rem;
      height: 2.5rem;
      background-color: rgba($color: $white, $alpha: 0.3);
    }
    .warn {
      display: flex;
      align-items: center;
      border-radius: 0.125rem;
      margin-right: 1.125rem;
      height: 2.5rem;
      .warnbell {
        width: 1.375rem;
        height: 1.375rem;
      }
      .line {
        margin: 0 1rem;
        height: 1.25rem;
      }
      .info {
        margin-left: 0.5rem;
        width: 6.3125rem;
        font-weight: 600;
      }
      .warn-right {
        display: flex;
        align-items: center;
        margin-top: 0.25rem;
        width: 13.125rem;
        .dot {
          width: 0.25rem;
          height: 0.25rem;
        }
        .swiper {
          display: inline-flex;
          margin-left: 0.375rem;
          flex: 1;
          .el-carousel {
            flex: 1;
            .item {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 11.25rem;
              height: 2.5rem;
              line-height: 2.5rem;
              color: $red;
            }
          }
          .switch {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            color: $red;
            cursor: pointer;
          }
        }
      }
      &.warning {
        .dot {
          background-color: $red;
        }
        .info {
          color: $red;
        }
      }
      &.default {
        .info {
          color: $light2Grey;
        }
        .dot {
          background-color: $light2Grey;
        }
      }
      .empty {
        margin-left: 0.75rem;
        line-height: 1.25rem;
        color: $light2Grey;
      }
    }
    .product {
      display: flex;
      align-items: center;
      height: 2.5rem;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.75rem;
        box-sizing: border-box;
        // width: 11.625rem;
        height: 2rem;
        line-height: 2rem;
        img {
          width: 1.375rem;
          height: 1.375rem;
        }
        &-inner {
          display: flex;
          justify-content: space-between;
          width: 8.125rem;
          .label {
            margin-left: 0.5rem;
            color: rgba($color: $white, $alpha: 0.7);
          }
          .value {
            font-size: $numberLText;
            // color: $yellow;
          }
        }
      }
      .safe .value {
        color: $green;
      }
      .system .value {
        color: $cyan;
      }
    }
    .setting {
      position: relative;
      display: flex;
      align-items: center;
      margin-left: 1.25rem;
      height: 1.875rem;
      cursor: pointer;
      .person-icon {
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 100%;
      }
      .arrow-down {
        width: 0.875rem;
        margin-left: 0.25rem;
      }
      .setting-panel {
        width: 5rem;
        position: absolute;
        top: 1.875rem;
        left: -1.75rem;
        background-color: rgba(0, 0, 0, 0.83);
        font-size: 0.75rem;
        color: #f8f8f8;
        line-height: 1.875rem;
        div {
          padding: 0 0.625rem;
          cursor: pointer;
        }
        :first-of-type {
          border-bottom: 0.125rem solid rgba($color: $white, $alpha: 0.1);
        }
      }
    }
  }
}
</style>
